<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title></title>
		<style type="text/css">
			body{
				text-align: center;
			}
			.element{
				text-decoration: none;
				color: white;
				background-color: blue;
				padding: 5px 20px;
				border-radius: 50%;
				position: absolute;
				font-size: 30px;
			}
			#box{
				position: absolute;
				top: 100px;
				left: 50%;
				width: 1000px;
				height: 800px;
				margin-left: -500px;
				background-color: #ccc4c459;
			}
			span{
				color: chartreuse;
			}
			span#error{
				color: red;
			}
			span.button{
				display: inline-block;
				padding: 5px 20px;
				background-color: purple;
				color: white;
				border-radius: 10px;
				cursor: pointer;
			}
		</style>
	</head>
	<body>
		<audio src="music/背景音乐.mp3" id="audio"></audio>
		<marquee direction="right">
			<span onclick="toggleStart()" class="button">暂停/开始</span>
		</marquee>
		<!--<button onclick="start()">开始</button>-->
		<br />
		得分：<span id="score">0</span>分 <br />
		失误：<span id="error">0</span>次
		<hr />
		<div id="box">
			
		</div>
		<script type="text/javascript">
			var game = function(){
				this.box = "";
				this.status = false;
				this.init = function(){
					this.box = document.getElementById("box");
				}
				this.createElement = function(){
					var ele = document.createElement("a");
					var content = this.getText();
					ele.setAttribute("class","element");
					ele.innerText = content;
					ele.setAttribute("name",content);
					ele.style.left = Math.floor(Math.random()*850+50)+"px";
					ele.style.top = 10+"px";
					ele.style.borderRadius = Math.random()*15+10+"px";
//					ele.style.backgroundColor = "rgba("+ Math.random()*256 +","+ Math.random()*256 +","+ Math.random()*256 +","+ Math.random() +")";
					ele.style.backgroundColor = "rgb("+ Math.random()*256 +","+ Math.random()*256 +","+ Math.random()*256 +")";
					this.box.appendChild(ele);
				}
				this.getText = function(){
					return String.fromCharCode(Math.floor(Math.random()*26+65));
				}
				this.animation = function(){
					eles = document.getElementsByTagName("a");
					for(var i=0;i<eles.length;i++){
						var height = parseInt(eles[i].style.top)+1;
						if(height>=750){
							this.remove(eles[i]);
							var error = document.getElementById("error");
							error.innerText = parseInt(error.innerText)+1; 
						}else
							eles[i].style.top = (height)+"px";
					}
				}
				this.remove = function(e){
					this.box.removeChild(e);
				}
				this.start = function(){
					this.init();
					this.createElement();
					this.animation();
				}
				this.toggleMusic = function(){
					var m = document.getElementById("audio");
					if(m.paused == true){
						m.play();
					}else{
						m.pause();
					}
				}
			}
			var test = new game();
			
			
			function stop(){
				window.clearInterval(timer);
				window.clearInterval(timer1);
			    test.toggleMusic();
			}
			function start(){
				timer = window.setInterval("test.start()",500);
			    timer1 = window.setInterval("test.animation()",1);
			    test.toggleMusic();
			}
			function toggleStart(){
				console.log(test.status)
				if(test.status == true){
					test.status = false;
					stop();
				}else{
					test.status = true;
					start();
				}
			}
//			document.onk
			document.onkeyup=function(event){
				if(event.keyCode == 32){
					toggleStart();
					return;
				}
				var name = String.fromCharCode(event.keyCode);
				var eles = document.getElementsByName(name);
				for(var i = 0;i<eles.length;i++){
					test.box.removeChild(eles[i]);
					var score = document.getElementById("score");
					score.innerText = parseInt(score.innerText)+1; 
				}
			}
		</script>
	</body>
</html>
